<template>
    <section class="pages-container init-page">
        <section class="init-page-bg" @mousemove="mouseMove">
            <span class="init-page-text" :style="textShadowStyle">{{ projectName }}</span>
        </section>
        <div class="init-page-form-view">
            <div :class="['form-view']">
                <div class="form-view-top">
                    <div class="form-view-top-inner" :style="{ height: topHeight }">
                        <!--                        <Button type="info">Info</Button>-->
                    </div>
                </div>
                <div class="form-view-bottom">
                    <div class="form-view-bottom-inner" :style="{ height: bottomHeight }">
                        <div class="init-btn" @click="submitInit">
                            <span>初始化</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';

    @Component({})
    export default class Initialize extends Vue {
        projectName = 'WEBMAN';
        y = 650;
        topHeight = '0px';
        bottomHeight = document.body.offsetHeight - 600 + 'px';
        textShadowStyle: { [key: string]: string | number } = {};
        public mouseMove(ev: any): void {
            this.textShadowStyle = {
                'text-shadow': `${(this.x - ev.x) / 100}px ${(this.y - ev.y) / 100}px 8px #fff`
            };
        }
        get x(): number {
            return document.body.clientWidth / 2;
        }
        mounted(): void {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.topHeight = '166px';
                    this.bottomHeight = '74px';
                }, 0);
            });
        }

        /**
         * @Description: 提交初始化
         * @methodsName: submitInit
         * @param:
         * @return:
         * @author: Jsir
         */
        public submitInit(): void {
            this.linkToHome();
        }

        /**
         * @Description:跳转至首页
         * @methodsName: linkToHome
         * @param:
         * @return:
         * @author: Jsir
         */
        public linkToHome(): void {
            this.$router.replace('/home');
        }
    }
</script>

<style scoped lang="less" src="./index.less"></style>
